<template>
  <div class="CureIndicatorsAnalyze item-analyze">
    <!--    就诊指标分析-->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">就诊指标排名TOP10</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="60px">
            <el-row :gutter="12">
              <el-col :md="8" :lg="6" :xl="6">
                <el-form-item label="就诊类型" prop="mdtrtType">
                  <el-select v-model="searchForm.mdtrtType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="16" :lg="16" :xl="12">
                <el-form-item label="费用时间" prop="priceTime" class="clearmargin">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" :xl="6">
                <el-button size="small" type="primary" @click="restSearch('searchForm')">重置</el-button>
                <el-button size="small" type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :md="24" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人次</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="people-times" :axis-data="peopleTimesAxisData" :series-data="peopleTimesSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :md="24" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人数</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="people-amount" :axis-data="peopleAmountAxisData" :series-data="peopleAmountSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :md="24" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">次均记账医疗费用</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="medical-price" :axis-data="medicalAxisData" :series-data="medicalSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :md="24" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">人次人头比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="times-amount" :axis-data="amountAxisData" :series-data="amountSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">就诊指标同比环比TOP</span>
        </div>
      </div>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人次同比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jy-times" :axis-data="jyTimesAxisData" :series-data="jyTimesSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人数同比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jy-amount" :axis-data="jyAmountAxisData" :series-data="jyAmountSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">均次记账医疗费用同比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jztb" :axis-data="jztbAxisData" :series-data="jztbSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">人次人头比同比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="rcrttb" :axis-data="rcrttbAxisData" :series-data="rcrttbSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人次环比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jyrchb" :axis-data="jyrchbAxisData" :series-data="jyrchbSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">就医人数环比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jyrshb" :axis-data="jyrshbAxisData" :series-data="jyrshbSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">均次记账医疗费用环比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="jzhb" :axis-data="jzhbAxisData" :series-data="jzhbSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">人次人头比环比</span>
            </div>
            <div class="box-body">
              <bar-charts chart-id="rcrthb" :axis-data="rcrthbAxisData" :series-data="rcrthbSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import PriceTime from '../components/PriceTime'
import BarCharts from './components/barCharts'
import * as indicators from '../../../api/assist-decision/cureIndicatorsAnalyze'
export default {
  name: 'CureIndicatorsAnalyze',
  components: {
    'price-time': PriceTime,
    'bar-charts': BarCharts
  },
  mixins: [],
  props: {},
  data() {
    return {
      searchForm: {
        mdtrtType: null,
        beginDate: null,
        endDate: null
      },
      //  排名就医人数
      peopleAmountAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      peopleAmountSeriesData: [{ name: '就医人次同比', data: [1130, 452, 323, 394, 990, 380, 520, 270] }],
      //  排名就医人次
      peopleTimesAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      peopleTimesSeriesData: [{ name: '就医人次同比', data: [530, 452, 323, 394, 990, 380, 520, 270] }],
      //  排名人次人头比
      amountAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      amountSeriesData: [{ name: '就医人次同比', data: [430, 452, 323, 394, 990, 380, 520, 270] }],
      //  排名次均记账医疗费用
      medicalAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      medicalSeriesData: [{ name: '就医人次同比', data: [730, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比就医人次同比
      jyTimesAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jyTimesSeriesData: [{ name: '就医人次同比', data: [330, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比就医人数同比
      jyAmountAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jyAmountSeriesData: [{ name: '就医人数同比', data: [650, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比均次记账医疗费用同比
      jztbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jztbSeriesData: [{ name: '均次记账医疗费用同比', data: [130, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比人次人头比同比
      rcrttbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      rcrttbSeriesData: [{ name: '人次人头比同比', data: [130, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比就医人次环比
      jyrchbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jyrchbSeriesData: [{ name: '就医人次环比', data: [130, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比就医人数环比
      jyrshbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jyrshbSeriesData: [{ name: '就医人数环比', data: [130, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比均次记账医疗费用环比
      jzhbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      jzhbSeriesData: [{ name: '均次记账医疗费用环比', data: [130, 452, 323, 394, 990, 380, 520, 270] }],
      //  同比环比人次人头比环比
      rcrthbAxisData: ['广东省医院六', '广东省医院三', '广东省医院一', '广东省医院八', '广东省医院七', '广东省医院四', '广东省医院二', '广东省医院五'],
      rcrthbSeriesData: [{ name: '人次人头比环比', data: [130, 452, 323, 394, 990, 380, 520, 270] }]
    }
  },
  computed: {
    typeOptions: function() {
      return this.$store.getters.selectMaps.MDTRT_TYPE
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleChange() {},
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs[formName].resetFields()
    },
    search() {
      this.medicalSeriesData = [330, 552, 323, 494, 890, 1730, 220, 670]
      indicators.queryPeopleNumberTop(this.searchForm).then(res => {
        //  查询就医人数TOP10
        // this.peopleAmountAxisData =
        // this.peopleAmountSeriesData =
      })
      indicators.queryPeopleNumMoM(this.searchForm).then(res => {
        //  查询就医人数环比TOP10
        // this.peopleAmountAxisData =
        // this.peopleAmountSeriesData =
      })
      indicators.queryPeopleNumSpP(this.searchForm).then(res => {
        //  查询就医人数同比TOP10
        // this.jyAmountAxisData =
        // this.jyAmountSeriesData =
      })
      indicators.queryPeopleTimeMom(this.searchForm).then(res => {
        //  查询就医人次环比TOP10
        // this.jyrchbAxisData =
        // this.jyrchbSeriesData =
      })
      indicators.queryPeopleTimePerNumberMoMTop(this.searchForm).then(res => {
        //  查询就医人次人头比环比TOP10
        // this.rcrthbAxisData =
        // this.rcrthbSeriesData =
      })
      indicators.queryPeopleTimePerNumberSpPTop(this.searchForm).then(res => {
        //  查询就医人次人头比同比TOP10
        // this.rcrttbAxisData =
        // this.rcrttbSeriesData =
      })
      indicators.queryPeopleTimePerNumberTop(this.searchForm).then(res => {
        //  查询就医人次人头比TOP10
        // this.amountAxisData =
        // this.amountSeriesData =
      })
      indicators.queryPeopleTimeSpP(this.searchForm).then(res => {
        //  查询就医人次同比TOP10
        // this.jyTimesAxisData =
        // this.jyTimesSeriesData =
      })
      indicators.queryPeopleTimeTop(this.searchForm).then(res => {
        //  查询就医人次TOP10
        // this.peopleTimesAxisData =
        // this.peopleTimesSeriesData =
      })
      indicators.queryReimFeePerTimeMoMTop(this.searchForm).then(res => {
        //  查询次均记账医疗费用环比TOP10
        // this.jzhbAxisData =
        // this.jzhbSeriesData =
      })
      indicators.queryReimFeePerTimeSpPTop(this.searchForm).then(res => {
        //  查询次均记账医疗费用同比TOP10
        // this.jztbAxisData =
        // this.jztbSeriesData =
      })
      indicators.queryReimFeePerTimeTop(this.searchForm).then(res => {
        //  查询次均记账医疗费用TOP10
        // this.medicalAxisData =
        // this.medicalSeriesData =
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
